import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

// const numbers = [1, 2, 3, 4, 5];
let data = [
  {
    id: 1,
    name: "小小i",
  },
  {
    id: 2,
    name: "小小e",
  },
  {
    id: 3,
    name: "小小e",
  },
];
// key的作用就是对组件进行一个标记，在render的时候可以复用,提升性能
// key必须是唯一的,否则渲染结果可能会出错

function ListItems(props) {
  return <li>{props.name}</li>;
}
function NumberList(props) {
  const numbers = props.numbers;
  // 在哪里遍历 key就写在哪里
  const listItems = numbers.map((item) => (
    <ListItems name={item.name} key={item.id} />
  ));
  return <ul>{listItems}</ul>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<NumberList numbers={data} />);
